<template>
    <div class="audio-player">
        <!-- 音频 --> 
        <audio ref="in-audio" :src="audioPath"
            @play="inAudioPlay()" @pause="inAudioPause()"  @timeupdate="inAudioTime()" @error="inAudioError()" @canplay="inAudioCanplay()" @ended="inAudioEnd()"  @playing="inPlaying()" @waiting="inAudioWait()"
        ></audio>
        <div class="in-controls">
            <div :class="[isPlay ? 'in-play-btn in-pause-btn' : 'in-play-btn']" @click="playBtn()"></div>
            <div class="in-bar">
                <div class="in-current-time">{{inCurrentTime}}</div>
                <!--进度条-->
                <div class="in-progress" ref="in-progress">
                    <!--播放进度条-->
                    <div class="in-elapse" ref="in-elapse" :style="'width:'+ inElapseP +'%;'">
                        <!--拖动点-->
                        <div class="in-dot" @touchstart="inDragStart($event)" @touchmove="inDrag($event)"></div> 
                    </div>
                    <!--缓冲进度条-->
                    <!--<div class="loaded"></div>-->
                </div>
                <div class="in-total-time">{{inTotalTime}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getParames } from '@/utils/common'

export default {
  name: 'prize',
  props:[
      "audioPath",
      "inTotalTime",
  ],
  data () {
    return {
      userid:sessionStorage.getItem("userid"),
    //   audioSrc:'',
      isPlay:false,
      inCurrentTime:'00:00',
    //   inTotalTime:'00:00',
      totalTime:0,
      inDragSX:0,
      inDragSY:0,
      inProgressW:0,
      inElapseW:0,
      inElapseP:0,
    }
  },
  created:function() {
      
  },
  mounted:function() {

  },
  methods: {
        playBtn(){
            let audio=this.$refs['in-audio']
            if(audio.paused){
                // this.audioSrc=this.poe.VideoPath
                // let timer=setInterval(()=>{ 
                //     console.log(1)
                //     if (audio.networkState === 2) {
                        audio.play()
                //         clearInterval(timer); 
                //     }else{
                //         console.log('音频未就绪')
                //     }
                // },1); 
            }else{
                audio.pause()
            }  
        },
        /* audio状态 */
        inAudioError(){
            // alertMask(this,'error:音频加载出错')
        },
        inAudioWait(){
            
        },
        inAudioPlay(){
            this.isPlay=true;
        },
        inPlaying(){

        },
        inAudioPause(){
            this.isPlay=false;
        },
        inAudioCanplay(){
            this.totalTime=this.$refs['in-audio'].duration;
            //   if(this.audioSrc){
            //     this.$refs['in-audio'].play()
            //   }
        },
        /* 播放结束 */
        inAudioEnd(){

        },
        /* 播放位置 */
        inAudioTime(){
            try{
            let audioNet = this.$refs['in-audio'].networkState;
            let audioReady = this.$refs['in-audio'].readyState;
                
            let time=this.$refs['in-audio'].currentTime;
            this.inCurrentTime=this.getTime(time)
            this.inElapseP=time/this.totalTime*100;
            }catch(e){
                console.log("播放异常")
            }
        },
        /* 时间 */
        getTime(time){
            let hour=Math.floor(time/3600);
            hour=hour<10?"0"+hour:hour;
            let minute=Math.floor(time%3600/60);
            minute=minute<10?"0"+minute:minute;
            let second=Math.floor(time%60);
            second=second<10?"0"+second:second;
            return minute+":"+second; 
        },
        /* 拖动 */
        inDragStart(event){
            let touch = event.changedTouches[0]; //获取第一个触点
            this.inDragSX = Number(touch.pageX); //页面触点X坐标
            this.inDragSY = Number(touch.pageY); //页面触点Y坐标
            this.inElapseW = this.$refs['in-elapse'].clientWidth;
            this.inProgressW=this.$refs['in-progress'].clientWidth;
            
        },
        inDrag(event){
            let touch = event.changedTouches[0]; 
            let inDragY = Number(touch.pageY); 
            let inDragX = Number(touch.pageX); 
            
            let dv='';
            dv = inDragX - this.inDragSX;
            // alertMask(this,dv)
            // console.log(dv)
            let newWidth=this.inElapseW+dv
            // console.log(newWidth)
            if(newWidth<0){
                this.inElapseP=0;
            }else if(newWidth>this.inProgressW){
                this.inElapseP=100;
            }else{
                this.inElapseP=newWidth/this.inProgressW*100;
            }
            if(this.inElapseP<100){
                this.$refs['in-audio'].currentTime = this.inElapseP/100*this.totalTime
            }else{
                // this.$refs['in-video'].pause()
            }
            
        },
  }
}
</script>
<style  lang="scss" scoped>
    @import '~@/assets/scss/_public.scss';
 //播放条
.in-controls{
    padding: 0.16rem 0.32rem 0.34rem 1.24rem;
    width: 100%; 
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border-radius:0 0 0.6rem 0.6rem;
    background: #fff;
    position: relative;
    .in-play-btn{
        position: absolute;
        top: 0.16rem;
        left: 0.4rem;
        @include elementSize(0.72rem,0.72rem); 
        border-radius: 50%;
        background: #33cc89 url(~@/assets/img/player/in-play.png) no-repeat center center;
        background-size: 0.26rem 0.26rem;
        &.in-pause-btn{
            background-image: url(~@/assets/img/player/in-pause.png);
            background-size: 0.24rem 0.26rem;
        }
    }
    .in-bar{
        width: 100%;
        // @include elementSize(100%,1rem); 
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        color: #adb9c7;
        font-size: 0.2rem;
        background: #ebeef2;
        padding: 0.3rem 1.14rem;
        position: relative;
        border-radius: 0.4rem;
        .in-current-time,
        .in-total-time{
            position: absolute;
            top: 0.26rem;
            height: 0.22rem;
            line-height: 0.22rem;
        }
        .in-current-time{
            left: 0.28rem;
        }
        .in-total-time{
            right: 0.28rem;
        }
        .in-progress{
            @include elementSize(100%,0.12rem);
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            background: #fff;
            border-radius: 0.08rem;
            position: relative;
            .in-elapse{
                position: absolute;
                left: 0;
                top: 0; 
                @include elementSize(0,100%);
                background: #fff;
                border-radius: 0.7rem;
                .in-dot{
                    position: absolute;
                    right: -0.16rem;
                    top: -0.1rem;
                    @include elementSize(0.32rem,0.32rem); 
                    border-radius: 50%;
                    background: #33cc89;
                }
            }
        }
    }
}

</style>